<!--ljx 2022.9.1 测试页面  -->
<template>
    <div class=''>
	 <el-row :gutter="20">
	 	   <el-col :span="2"/>
	   <el-col :span="4" >
	 		<myleft></myleft>
	 	</el-col>
	   <el-col :span="16" style="margin-left: -14px;">
			<div >
				<el-breadcrumb  style="background-color:orange;color: white;height: 34px;font-size: 20px;padding-left: 20px;padding-top: 10px;">
				  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				  <el-breadcrumb-item  :to="{ path: '/' }">购物车</el-breadcrumb-item>
				  <el-breadcrumb-item>promotion list</el-breadcrumb-item>
				</el-breadcrumb>
					<div class="machine-list-card" v-for="item in cartlist">
					<div style="display: flex;">

						<div class="left">

							<div class="img">
								<img :src="item.img" class="img">
							</div>
						</div>
						<div class="right">
							<div class="info-item">
								<div class="info-item-title">
									{{item.title}}
								</div>
							</div>

							<div class="info-item">
								<div class="info-item-title">
									¥{{item.price}}
								</div>

							</div>
							<div class="info-item">
								<div class="info-item-title">
									<!-- {{item.num}} -->
									数量 <input type="text" name="num" v-model="item.num" class="form-control"
										placeholder="请输入 " />

								</div>
							</div>
						</div>
					</div>

				</div>

			</div>
			<div>

				<div style="margin: 15px 0;">统计结果， {{sumPrice}},结算 ：{{sumNum}}
				</div>
				<button type="button" @click="checkin()" class="button" style="width: 100px;margin-left: 20px;">结算</button>
				<button type="button" @click="closed()" class="button" style="width: 100px;margin-left: 20px;">返回</button>
			</div>
	 	</el-col>
	 	 <el-col :span="2"/>
	 </el-row>

    </div>
</template>

<script>
	import myleft from '../components/myleft.vue'
	export default {
		components: {
			myleft
		},

		data() {
			return {
				goodobj: {},
				cartlist: [{
					id: 1,
					title: '石硖龙眼',
					describe: '约250g，大个',
					price: 13,
					num: 11,
					goodclass: 'small',
					img: '/a1.jpg',
					memo:'广东高州龙眼新鲜桂圆石硖储良水果当季现摘发货5斤包邮本地特产 '
				}, {
					id: 2,
					title: '福建荔枝',
					describe: '约600g',
					price: 42,
					num: 22,
					goodclass: 'small',
					img: '/a2.jpg',
					memo:'福建荔枝当季整箱福建蒙新鲜荔枝特大果锦绣现摘现货 '
				}, {
					id: 3,
					title: '海南金煌芒果',
					describe: '约680g/3个',
					price: 66,
					num: 31,
					goodclass: 'big',
					img: '/a3.jpg',
					memo:'海南金煌芒果 当应季新鲜水果现摘整箱包邮百色5青皮桂7芒果 '
				}],
			}
		},

		computed: {
			sumNum() {
				var sum1 = 0;
				for (var i = 0; i < this.cartlist.length; i++) {
					sum1 += this.cartlist[i].num * 1;
				}
				console.log('sumnum:', sum1);

				return '总数量 ：' + sum1 + '   ';
			},
			sumPrice() {
				var sum = 0;
				for (var i = 0; i < this.cartlist.length; i++) {
					sum += this.cartlist[i].num * this.cartlist[i].price;
				}
				console.log('sumprice:', sum);

				return '总金额 ：' + sum + '   ';
			},
		},

		methods: {
			mygetdata() {
				let myparams = {
					status: '未提交',
					createBy: this.$store.state.loginName
				};
				this.getdata('/system/cart/list?pageNum=1&pageSize=42', myparams).then(response => {
					// console.log(11)
					console.log(response)
					if (response.code == 401) //认证失败，无法访问系统资源,跳转到登录页面
					{
						console.log(12)
						this.$router.push({
							name: 'loginT'
						});
						return;
					}

					this.cartlist.splice(0,this.cartlist.length);
					for (var index in response.rows) {
						let newgood = {
							id: response.rows[index],
							img: "/a1.jpg",
							title: "测试",
							describe: "新产品",
							price: 121,
							num: 3,
							memo: '无'
						};

						response.rows[index].img = response.rows[index].img;
						newgood.id = response.rows[index].id;
						newgood.img = response.rows[index].img;
						newgood.title = response.rows[index].title;
						newgood.describe = response.rows[index].mydescribe;
						newgood.price = response.rows[index].price;
						newgood.num = response.rows[index].num;
						newgood.memo = response.rows[index].memo;
						this.cartlist.push(newgood);
					}

				}).catch((err) => {
					console.log(err)
				})
			},
			closed() {
				alert('我要返回');
				this.$router.push('goodslist');
			},
			checkin() {
				let username = sessionStorage.getItem("username");
				console.log('username3',username);
				if(username == undefined || username == null)
				{
					console.log('in list');
					this.$router.push('/loginT');
					return;
				}
				for (var i = 0; i < this.cartlist.length; i++) {
					let goodobj = {
						id: this.cartlist[i].id,
						updateBy: username,
						status: '已提交'
					};
					this.execdata('/system/cart', goodobj, 'PUT').then(response => {
						console.log('修改成功' + i + '：', goodobj);
						this.mygetdata();
						this.$router.go(0); // 刷新页面
					});
				}

			},
		},
		mounted() {
			console.log('mounted');
			this.mygetdata();
		},
		updated() {
			console.log('updated');
		}
	};
</script>

<style scoped>
	.machine-list-card {
		/* width: 850px; */
		height: 100px;
		/* margin: 5px auto; */
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
		border-radius: 10px;
		box-shadow: 5px 5px 10px rgba(160, 160, 160, 0.3);
		margin-bottom: 10px;
		/* margin-right: 10px; */
	}

	.check1 {
		width: 80px;
		height: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left {
		width: 80px;
		height: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.right {
		min-width: 600px;
		height: 100px;
		padding: 20px;
		box-sizing: border-box;
		display: flex;
		/* flex-direction: column; */
		justify-content: space-around
	}

	.img {
		width: 80px;
		height: 80px;
	}

	.img image {
		width: 80px;
		height: 80px;
	}

	.info-item {
		display: flex;
		white-space: nowrap;
		display: inline-grid;
		align-content: center;

	}

	.info-item-title {
		/* font-weight: bold; */
		font-size: 20px;
		width: 4em;
		text-align: justify;
		text-align-last: justify;
	}

	.info-item-content {
		margin-left: 10px;
		overflow: hidden;
	}
</style>
